<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合同查询</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
        html,body,#app{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #app{
            overflow: scroll;
            background: #F0F0F0;
        }
        .el-form{
            width: 80%;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100%;
        }
        .el-col{
            box-sizing: border-box;
            padding-right: 12px;
        }
        .el-table{
            width: 80%!important;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100% !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--    合同列表-->
        <el-table
                v-cloak
                :data="contractList"
                style="width: 100%">
            <el-table-column
                    prop="dealTime"
                    label="签订时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="signTime"
                    label="开始时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="dealContent"
                    label="内容"
                    width="*">
            </el-table-column>

            <el-table-column width="120">
                <template slot-scope="scope">
                    <!--                查看-->
                    <el-button type="success" icon="el-icon-view" size="small"
                               @click="view(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--    查看合同-->
        <el-dialog
                v-cloak
                title="查看合同"
                width="80%"
                :visible.sync="viewContractVisible">
            <el-form
                    :model="viewContract"
                    ref="viewContract"
                    label-width="100px"
                    class="demo-dynamic"
                    size="medium">
                <el-form-item label="客 户">
                    <el-row>
                        <el-col :span="10">
                            <el-input v-model="viewContract.clientName" readonly></el-input>
                        </el-col>
                        <el-col :span="4" style="text-align: right;">
                            时间
                        </el-col>
                        <el-col :span="10" style="padding: 0">
                            <el-input v-model="viewContract.signTime" readonly></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="员 工">
                    <el-input v-model="viewContract.userName" readonly></el-input>
                </el-form-item>
                <el-form-item label="内 容">
                    <el-input type="textarea" :rows="4" v-model="viewContract.dealContent" readonly></el-input>
                </el-form-item>
                <el-form-item
                        v-for="(item, index) in viewContract.goods"
                        :label="!index?'商 品':''"
                        :key="item.key">
                    <el-row>
                        <el-col :span="7">
                            <el-input v-model="item.goodsname" readonly></el-input>
                        </el-col>
                        <el-col :span="7">
                            <el-input v-model="item.goodsprice" readonly></el-input>
                        </el-col>
                        <el-col :span="7">
                            <el-input v-model="item.goodsnumber" readonly></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="viewContractVisible = false">取 消</el-button>
            <el-button type="primary" @click="viewContractVisible = false">确 定</el-button>
        </span>
        </el-dialog>
    </div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                userId: '',
                contractList: '',
                viewContractVisible: false,
                viewContract: '',
            }
        },
        created() {
            this.getUserId();
        },
        methods: {
            getUserId(){
                axios.post(
                    '/member/getUserId'
                ).then(function (res) {
                    this.userId = res.data;
                    axios.post(
                        '/deal/getDealByStaff',
                        'userId='+userId
                    ).then(function (res) {
                        // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.canFix = list[key].canFix;
                            i.dealContent = list[key].dealcontent;
                            i.dealId = list[key].dealid;
                            i.dealTime = app.toTimes1(list[key].dealtime);
                            i.signTime = app.toTimes1(list[key].signtime);
                            bufferList.push(i);
                        }
                        app.contractList = bufferList;
                    });
                });
            },
            view(contract){
                this.viewContractVisible = true;
                axios.post(
                    '/deal/getDeal',
                    "dealId="+contract.dealId
                ).then(function (res) {
                    // console.info(res.data);
                    let message = res.data.message;
                    let goods = res.data.goods;
                    let i = new Object();
                    i.canFix = message.canFix;
                    i.dealContent = message.dealcontent;
                    i.dealId = message.dealid;
                    i.dealTime = app.toTimes1(message.dealtime);
                    i.clientId = message.fkClientid;
                    i.clientName = message.fkClientname;
                    i.userId = message.fkStaffid;
                    i.userName = message.fkStaffname;
                    i.signTime = message.signtime;
                    i.goods = goods;
                    app.viewContract = i;
                    // console.info(app.viewContract);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            toTimes1(time){
                //时间戮转时间格式
                let date = new Date(time);//时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = ('0'+(date.getMonth()+1)).substr(-2) + '-';
                let D = ('0'+date.getDate()).substr(-2) + ' ';
                let h = ('0'+date.getHours()).substr(-2) + ':';
                let m = ('0'+date.getMinutes()).substr(-2) + '';
                //let s = ('0'+date.getSeconds()).substr(-2);
                return Y+M+D+h+m;
            },
        }
    });
</script>
</body>
</html>